<template>
  <div class="wrapper">
    <div id="building">
      <div class="box">
        <img src="@/assets/logo.png" alt="" style="width: 40px; height: 40px;  top: 10px; left: 20px">
        <div style="font-size: 20px; margin-top: 5px; color:dodgerblue; font-weight: bold;">高校教务管理系统</div>
      </div>
      <div>
        <div style="margin: 20px; text-align: center; font-size: 30px; font-weight: bold; color: dodgerblue">登 录</div>
        <el-form >
          <el-form-item >
            <el-input placeholder="请输入账号" prefix-icon="el-icon-user" size="medium" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="请输入密码" show-password prefix-icon="el-icon-lock" size="medium"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%" size="medium" type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:  'Login',

  methods: {
    login() {
      this.$notify.success("登录成功")
      this.$router.push('/').catch(err=>{ })
    },
  }
}
</script>

<style>

#building {
  border:1px solid #dccfcf;
  width: 500px;
  height: 400px;
  border-radius: 10px;
  margin:200px auto;
  padding: 50px;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  background-color:rgba(255,255,255,0.7);

}

.box {
  width: 300px;
  height: 45px;
  display: flex;

}
</style>